<template>
    <div id="body">
      <div id="header">
        <div id="logo">
          <h2>智慧工厂监管系统</h2>
          <dv-decoration-6
            style="position: absolute;width:80%;height:20px;margin: 0 10%;bottom: 5%;"
          />
        </div>
        <div id="header-left">
          <div id="header-left-top">
            <dv-decoration-10 style="float: left; width: 67%;height: 100%;" />
            <dv-decoration-8
              :reverse="false"
              style="float: left;width:20%;height: 65%;margin-top: 3.6%;"
            />
          </div>
          <div id="header-left-bottom">
            <select
              name="room"
              id="room"
              v-model="RoomValue"
              @change="ChangeRoom()"
              style="height: 80%;"
            >
              <option
                v-for="item in RoomMess"
                :key="item.number"
                :value="item.number"
              >{{ item.room }}</option>
            </select>
            <select
              name="device"
              id="device"
              @change="UpdateData"
              v-model="DeviceValue"
              style="width: 160px;height: 80%;"
            >
              <option
                v-for="item in DeviceMess"
                :key="item.value"
                :value="item.value"
              >{{ item.label }}</option>
            </select>
          </div>
        </div>
        <div id="header-right">
          <div id="header-right-top">
            <dv-decoration-10 style="float: right; width: 67%;height: 100%;" />
            <dv-decoration-8
              :reverse="true"
              style="float: right;width:20%;height: 65%;margin-top: 3.6%;"
            />
          </div>
          <div id="header-right-bottom">
            <!-- <div class="naviga-item">
              <span class="naviga-item-title" @click="changeBg">主界面</span>
            </div>
            <div class="naviga-item" @click="JumpToLogin">
              <span class="naviga-item-title">后台管理</span>
            </div>-->
            <dv-decoration-11
              style="position:absolute; right: -5%;width:35%;height:150%;transform: scale(.7);margin-top: -3%;"
            >
              <span
                style="color: #04a4d2;font-weight: bold;font-size: 20px;"
                @click="JumpToLogin"
              >后台管理</span>
            </dv-decoration-11>
            <dv-decoration-1
              style="position: absolute; right: 30%;bottom:15%;width:35%;height:100%;"
            />
          </div>
        </div>
      </div>
      <div id="top">
        <div id="top-left">
          <dv-border-box-13>
            <div class="box-center">
              <div class="box-title">
                <svg-icon icon-class="data"></svg-icon>
                <div class="box-text">
                  <span>实时数据展示</span>
                </div>
              </div>
              <div class="box-body">
                <dv-scroll-board class="init-ui" :config="SimpleData" style="width:100%;height:100%;" />
              </div>
            </div>
          </dv-border-box-13>
        </div>
        <div id="top-main">
          <dv-border-box-1>
            <dv-flyline-chart-enhanced :config="MapConfig" style="width:80%;height:100%;" />
            <div id="top-main-mess">
              <dv-border-box-10>
                <div class="box-center" style="padding: 10% 6%;">
                  <p style="font-weight: bold;text-align: center;">
                    XXXX科技
                    <br />有限公司
                  </p>
                  <p>
                    <dv-decoration-5 style="width:100%;height:20px;" />
                  </p>
                  <p style="font-size: 14px;font-weight: bold;margin: 20px;text-align: center;">
                    设备数
                    <span style="font-size: 15px;margin: 0 10px;">{{ OverMess.device }}</span>台
                  </p>
                  <p style="font-size: 14px;font-weight: bold;text-align: center;">
                    厂房数
                    <span style="font-size: 15px;margin: 0 10px;">{{ OverMess.room }}</span>间
                  </p>
                  <p style="position :absolute;width: 100%;bottom: 5%;left: 0;padding: 0 7%;">
                    <span
                      style="display: inline-block;width:100%;font-size: 14px;font-weight: bold;text-align: center;"
                    >覆盖率</span>
                    <dv-water-level-pond
                      id="overrater"
                      :config="OverRate"
                      style="width:100%;height:110px;margin-top: 10px;"
                    />
                  </p>
                </div>
              </dv-border-box-10>
            </div>
          </dv-border-box-1>
        </div>
        <div id="top-right">
          <div id="top-right-top">
            <dv-border-box-12>
              <div class="box-center">
                <div class="box-body" style="width: 100%;height: 100%; padding-top: 0; text-align: center;line-height: 40px;">
                  <span
                    style="font-size: 30px;font-weight:bold;color:#3de7c9;"
                  >{{ DateTime.time }} </span>
                  <span
                    style="font-size: 18px;color:#3de7c9;"
                  >{{ DateTime.date }} {{ DateTime.week }}</span>
                </div>
              </div>
            </dv-border-box-12>
          </div>
          <div id="top-right-middle">
            <dv-border-box-12>
              <div class="box-center" style="padding: 9px 10px;">
                <div class="box-title" style="top: 9px">
                  <svg-icon icon-class="data"></svg-icon>
                  <div class="box-text">
                    <span>今日预警记录</span>
                  </div>
                </div>
                <div class="box-body">
                  <dv-scroll-board :config="WarningData" style="width:100%;height:100%;" />
                  <p
                    v-show="WarningData.data.length === 0"
                    style="position: absolute;width: 100%; height: 30px;line-height: 30px;color: #C0C4CC; text-align: center;top: 50%;margin-left: -8px;margin-top: -15px;"
                  >暂无数据</p>
                </div>
              </div>
            </dv-border-box-12>
          </div>
          <div id="top-right-bottom">
            <dv-border-box-12>
              <div class="box-center" style="padding: 9px 10px;">
                <div class="box-title" style="top: 9px">
                  <svg-icon icon-class="data"></svg-icon>
                  <div class="box-text">
                    <span>数据峰值</span>
                  </div>
                </div>
                <div class="box-body" style="padding-bottom: 6px;">
                  <dv-conical-column-chart :config="TopData" style="width:100%;height:100%;" />
                  <span class="data-top" style="left: 13%;top: 130px;">{{ Top.tempTop }}</span>
                  <span class="data-top" style="left: 23.57%;top: 90px;">{{ Top.humTop }}</span>
                  <span class="data-top" style="left: 34.14%;top: 130px;">{{ Top.co2Top }}</span>
                  <span class="data-top" style="left: 44.71%;top: 90px;">{{ Top.tvocTop }}</span>
                  <span class="data-top" style="left: 55.28%;top: 130px;">{{ Top.pressTop }}</span>
                  <span class="data-top" style="left: 65.85%;top: 90px;">{{ Top.o3Top }}</span>
                  <span class="data-top" style="left: 76.42%;top: 130px;">{{ Top.windTop }}</span>
                  <span class="data-top" style="left: 86.99%;top: 90px;">{{ Top.pm25Top }}</span>
                </div>
              </div>
            </dv-border-box-12>
          </div>
        </div>
      </div>
      <div id="bottom">
        <div id="bottom-first">
          <dv-border-box-13>
            <div class="box-center">
              <div class="box-title">
                <svg-icon icon-class="data"></svg-icon>
                <div class="box-text">
                  <span>综合满足率</span>
                </div>
              </div>
              <div class="box-body">
                <dv-decoration-9 style="position: absolute;width:200px;height:200px;left: 50%; top: 50%;margin-left: -100px;margin-top: -80px;">
                  <span style="font-size: 25px;font-weight: bold;color: #ffffff;">{{ WholeStyle }}%</span>
                </dv-decoration-9>
              </div>
            </div>
          </dv-border-box-13>
        </div>
        <div id="bottom-second">
          <dv-border-box-13>
            <div class="box-center">
              <div class="box-title">
                <svg-icon icon-class="data"></svg-icon>
                <div class="box-text">
                  <span>参数变化曲线</span>
                </div>
              </div>
              <div id="lineArea" class="box-body"></div>
            </div>
          </dv-border-box-13>
        </div>
        <div id="bottom-third">
          <dv-border-box-13>
            <div class="box-center">
              <div class="box-title">
                <svg-icon icon-class="data"></svg-icon>
                <div class="box-text">
                  <span>阈值总览</span>
                </div>
              </div>
              <div id="barArea" class="box-body">
                <dv-scroll-board
                  :config="ThresholdData"
                  style="width:100%;height:100%;text-align: center"
                />
              </div>
            </div>
          </dv-border-box-13>
        </div>
        <div id="bottom-fourth">
          <dv-border-box-12>
            <div class="box-center" style="padding: 9px 10px;">
              <div class="box-title" style="top: 9px">
                <svg-icon icon-class="data"></svg-icon>
                <div class="box-text">
                  <span>参数指标</span>
                </div>
              </div>
              <div class="box-body">
                <dv-capsule-chart :config="DataConfig" style="width:100%;height:100%;" />
              </div>
            </div>
          </dv-border-box-12>
        </div>
      </div>
    </div>
</template>

<script>
import {
  getDeviceList,
  getNewData,
  getThreshold,
  getDataTop,
  getLineList,
  getDataStyle,
  getWarnData,
  getRoomData,
} from "@/api/dashboard.js";
import { getDateTime } from "@/api/time.js";
export default {
  data() {
    return {
      MapConfig: {
        points: [
          {
            name: "郑州",
            coordinate: [0.48, 0.35],
            halo: {
              show: true,
              color: "#8378ea",
            },
          },
          {
            name: "新乡",
            coordinate: [0.52, 0.23],
          },
          {
            name: "焦作",
            coordinate: [0.43, 0.29],
            halo: {
              show: true,
            },
          },
          {
            name: "开封",
            coordinate: [0.59, 0.35],
          },
          {
            name: "许昌",
            coordinate: [0.53, 0.47],
          },
          {
            name: "平顶山",
            coordinate: [0.45, 0.54],
          },
          {
            name: "洛阳",
            coordinate: [0.36, 0.38],
          },
          {
            name: "周口",
            coordinate: [0.62, 0.55],
            halo: {
              show: true,
            },
          },
          {
            name: "漯河",
            coordinate: [0.56, 0.56],
          },
          {
            name: "南阳",
            coordinate: [0.37, 0.66],
          },
          {
            name: "信阳",
            coordinate: [0.55, 0.81],
            halo: {
              show: true,
            },
          },
          {
            name: "驻马店",
            coordinate: [0.55, 0.67],
          },
          {
            name: "济源",
            coordinate: [0.37, 0.29],
          },
          {
            name: "三门峡",
            coordinate: [0.2, 0.36],
          },
          {
            name: "商丘",
            coordinate: [0.76, 0.41],
          },
          {
            name: "鹤壁",
            coordinate: [0.59, 0.18],
          },
          {
            name: "濮阳",
            coordinate: [0.68, 0.17],
          },
          {
            name: "安阳",
            coordinate: [0.59, 0.1],
          },
        ],
        lines: [
          {
            source: "新乡",
            target: "郑州",
          },
          {
            source: "焦作",
            target: "郑州",
          },
          {
            source: "开封",
            target: "郑州",
          },
          {
            source: "许昌",
            target: "郑州",
          },
          {
            source: "平顶山",
            target: "郑州",
          },
          {
            source: "洛阳",
            target: "郑州",
          },
          {
            source: "周口",
            target: "郑州",
          },
          {
            source: "漯河",
            target: "郑州",
          },
          {
            source: "南阳",
            target: "郑州",
          },
          {
            source: "信阳",
            target: "郑州",
          },
          {
            source: "驻马店",
            target: "郑州",
          },
          {
            source: "济源",
            target: "郑州",
          },
          {
            source: "三门峡",
            target: "郑州",
          },
          {
            source: "商丘",
            target: "郑州",
          },
          {
            source: "鹤壁",
            target: "郑州",
          },
          {
            source: "濮阳",
            target: "郑州",
          },
          {
            source: "安阳",
            target: "郑州",
          },
        ],
        bgImgSrc: require("@/assets/dashboard/map.png"),
      },
      DataConfig: {},
      ThresholdData: {
        data: [],
        rowNum: 8,
        align: ["center"],
        carousel: "page",
        headerBGC: "",
        oddRowBGC: "rgba(255, 255, 255, .01)",
        evenRowBGC: "rgba(255, 255, 255, .05)",
      },
      ThresHold: {},
      SimpleData: {},
      SimpleSize: [60, 100, 100],
      TopData: {
        data: [
          {
            name: "温度",
            value: 1,
          },
          {
            name: "湿度",
            value: 0.975,
          },
          {
            name: "CO2",
            value: 0.95,
          },
          {
            name: "tvoc",
            value: 0.925,
          },
          {
            name: "压强",
            value: 0.9,
          },
          {
            name: "臭氧",
            value: 0.875,
          },
          {
            name: "风速",
            value: 0.85,
          },
          {
            name: "PM2.5",
            value: 0.8,
          },
        ],
        img: [
          require("@/assets/dashboard/temp.png"),
          require("@/assets/dashboard/hum.png"),
          require("@/assets/dashboard/co2.png"),
          require("@/assets/dashboard/tvoc.png"),
          require("@/assets/dashboard/press.png"),
          require("@/assets/dashboard/o3.png"),
          require("@/assets/dashboard/wind.png"),
          require("@/assets/dashboard/pm25.png"),
        ],
        showValue: false,
      },
      Top: {},
      DateTime: {
        date: "",
        time: "",
        week: "",
      },
      WarningData: {
        data: [],
        index: true,
        columnWidth: [50],
        rowNum: 4,
        align: ["center"],
        oddRowBGC: "rgba(255, 255, 255, .01)",
        evenRowBGC: "rgba(255, 255, 255, .05)",
      },
      LineData: {
        temp: [],
        hum: [],
        co2: [],
        tvoc: [],
        press: [],
        o3: [],
        wind: [],
        pm25: [],
      },
      WholeStyle: 0,
      OverMess: {
        room: 0,
        device: 0,
        over: 0,
      },
      RoomMess: [],
      RoomValue: "",
      DeviceMess: [],
      DeviceValue: "",
      OverRate: {
        data: [0, 0],
        shape: "roundRect",
        waveHeight: 16,
      },
    };
  },
  methods: {
    drawItemsLine() {
      let lineCharts = echarts.init(document.getElementById("lineArea"));

      lineCharts.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
        },
        legend: {
          data: ["温度", "湿度", "CO2", "臭氧", "PM2.5"],
          textStyle: {
            color: "#ffffff",
          },
        },
        color: ["#fb7293", "#37a2da", "#ffdb5c", "#00c08e", "#909399"],
        grid: {
          left: "0",
          right: "0",
          bottom: "0",
          containLabel: true,
        },
        xAxis: {
          data: [
            "60min前",
            "50min前",
            "40min前",
            "30min前",
            "20min前",
            "10min前",
            "最新",
          ],
          axisLabel: {
            color: "#ffffff",
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.2)",
              width: 2,
            },
          },
        },
        yAxis: [
          {
            name: "small",
            type: "value",
            axisLabel: {
              color: "#ffffff",
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)",
                width: 2,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
              },
            },
          },
          {
            name: "large",
            type: "value",
            axisLabel: {
              color: "#ffffff",
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)",
                width: 2,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
              },
            },
          },
        ],
        series: [
          {
            name: "温度",
            type: "line",
            yAxisIndex: 0,
            data: this.LineData.temp,
          },
          {
            name: "湿度",
            type: "line",
            yAxisIndex: 0,
            data: this.LineData.hum,
          },
          {
            name: "CO2",
            type: "line",
            yAxisIndex: 1,
            data: this.LineData.co2,
          },
          {
            name: "臭氧",
            type: "line",
            yAxisIndex: 0,
            data: this.LineData.o3,
          },
          {
            name: "PM2.5",
            type: "line",
            yAxisIndex: 0,
            data: this.LineData.pm25,
          },
        ],
      });

      // 根据窗口的大小变动图表 --- 重点
      window.addEventListener("resize", function () {
        lineCharts.resize();
      });
    },
    refreshDateTime() {
      var datetime = getDateTime();
      this.DateTime.date = datetime.date;
      this.DateTime.time = datetime.time;
      this.DateTime.week = datetime.week;
    },
    getMess() {
      //获取设备列表
      getDeviceList().then((response) => {
        if (response.flag) {
          this.RoomMess = response.data;
          this.RoomValue = this.RoomMess[0].number;
          this.DeviceMess = this.RoomMess[0].device;
          this.DeviceValue = this.DeviceMess[0].value;

          //响应最新数据
          this.UpdateData();
        }
      });
      //获取阈值
      getThreshold().then((response) => {
        if (response.flag) {
          const resp = response.data;
          this.ThresHold = resp;
          this.ThresholdData = {
            data: [
              ["温度", "<" + resp.TempHold.min, ">" + resp.TempHold.max, "℃"],
              ["湿度", "<" + resp.HumHold.min, ">" + resp.HumHold.max, "%"],
              ["CO2", "/", ">" + resp.CO2Hold.max, "ppm"],
              ["tvoc", "/", ">" + resp.TvocHold.max, "ppb"],
              [
                "压强",
                "<" + resp.PressHold.min,
                ">" + resp.PressHold.max,
                "hpa",
              ],
              ["臭氧", "/", ">" + resp.O3Hold.max, "ppm"],
              ["风速", "<" + resp.WindHold.min, ">" + resp.WindHold.max, "m/s"],
              ["PM2.5", "/", ">" + resp.Pm25Hold.max, "μg/m³"],
            ],
            rowNum: 8,
            align: ["center"],
            carousel: "page",
            headerBGC: "",
            oddRowBGC: "rgba(255, 255, 255, .01)",
            evenRowBGC: "rgba(255, 255, 255, .05)",
          };
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });
    },
    ChangeRoom() {
      this.DeviceMess = this.RoomMess[this.RoomValue - 1].device;
      this.DeviceValue = this.DeviceMess[0].value;
      this.UpdateData();
    },
    UpdateData() {
      //更新最新数据
      getNewData(this.DeviceValue).then((response) => {
        if (response.flag) {
          const resp = response.data;
          if (resp) {
            this.SimpleData = {
              header: [
                '<span style="font-weight: bold">项目</span>',
                '<span style="font-weight: bold">数据</span>',
                '<span style="font-weight: bold">单位</span>',
              ],
              data: [
                [
                  "温度",
                  '<span style="font-size: 15px;font-weight:300;color: ' +
                    (resp.fTemperature > this.ThresHold.TempHold.max ||
                    resp.fTemperature < this.ThresHold.TempHold.min
                      ? "#FF2727"
                      : "#25ff80") +
                    '">' +
                    resp.fTemperature +
                    "</span>",
                  "℃",
                ],
                [
                  "湿度",
                  '<span style="font-size: 15px;font-weight:300;color: ' +
                    (resp.fHumidity > this.ThresHold.HumHold.max ||
                    resp.fHumidity < this.ThresHold.HumHold.min
                      ? "#FF2727"
                      : "#25ff80") +
                    '">' +
                    resp.fHumidity +
                    "</span>",
                    "%"
                ],
                [
                  "CO2",
                  '<span style="font-size: 15px;font-weight:300;color: ' +
                    (resp.fCarbonDioxide > this.ThresHold.CO2Hold.max
                      ? "#FF2727"
                      : "#25ff80") +
                    '">' +
                    resp.fCarbonDioxide +
                    "</span>",
                    "ppm"
                ],
                [
                  "tvoc",
                  '<span style="font-size: 15px;font-weight:300;color: ' +
                    (resp.fTvoc > this.ThresHold.TvocHold.max
                      ? "#FF2727"
                      : "#25ff80") +
                    '">' +
                    resp.fTvoc +
                    "</span>",
                    "ppb"
                ],
                [
                  "压强",
                  '<span style="font-size: 15px;font-weight:300;color: ' +
                    (resp.fPressure > this.ThresHold.PressHold.max ||
                    resp.fPressure < this.ThresHold.PressHold.min
                      ? "#FF2727"
                      : "#25ff80") +
                    '">' +
                    resp.fPressure +
                    "</span>",
                    "hpa"
                ],
                [
                  "臭氧",
                  '<span style="font-size: 15px;font-weight:300;color: ' +
                    (resp.fO3 > this.ThresHold.O3Hold.max
                      ? "#FF2727"
                      : "#25ff80") +
                    '">' +
                    resp.fO3 +
                    "</span>",
                    "ppm"
                ],
                [
                  "风速",
                  '<span style="font-size: 15px;font-weight:300;color: ' +
                    (resp.fWind > this.ThresHold.WindHold.max ||
                    resp.fWind < this.ThresHold.WindHold.min
                      ? "#FF2727"
                      : "#25ff80") +
                    '">' +
                    resp.fWind +
                    "</span>",
                    "m/s"
                ],
                [
                  "PM2.5",
                  '<span style="font-size: 15px;font-weight:300;color: ' +
                    (resp.fPm > this.ThresHold.Pm25Hold.max
                      ? "#FF2727"
                      : "#25ff80") +
                    '">' +
                    resp.fPm +
                    "</span>",
                    "μg/m³"
                ],
              ],
              index: true,
              columnWidth: this.SimpleSize,
              rowNum: 8,
              align: ["center"],
              carousel: "page",
              headerBGC: "",
              oddRowBGC: "rgba(255, 255, 255, .01)",
              evenRowBGC: "rgba(255, 255, 255, .05)",
            };
          } else {
            this.SimpleData = {
              header: [
                '<span style="font-weight: bold">项目</span>',
                '<span style="font-weight: bold">数据</span>',
                '<span style="font-weight: bold">单位</span>',
              ],
              data: [
                [
                  "温度",
                  "<span style='font-size: 15px;font-weight:300;'>0</span>",
                  "℃",
                ],
                [
                  "湿度",
                  "<span style='font-size: 15px;font-weight:300;'>0</span>",
                  "%",
                ],
                [
                  "CO2",
                  "<span style='font-size: 15px;font-weight:300;'>0</span>",
                  "ppm",
                ],
                [
                  "tvoc",
                  "<span style='font-size: 15px;font-weight:300;'>0</span>",
                  "ppb",
                ],
                [
                  "压强",
                  "<span style='font-size: 15px;font-weight:300;'>0</span>",
                  "hpa",
                ],
                [
                  "臭氧",
                  "<span style='font-size: 15px;font-weight:300;'>0</span>",
                  "ppm",
                ],
                [
                  "风速",
                  "<span style='font-size: 15px;font-weight:300;'>0</span>",
                  "m/s",
                ],
                [
                  "PM2.5",
                  "<span style='font-size: 15px;font-weight:300;'>0</span>",
                  "μg/m³",
                ],
              ],
              index: true,
              columnWidth: this.SimpleSize,
              rowNum: 8,
              align: ["center"],
              carousel: "page",
              headerBGC: "",
              oddRowBGC: "rgba(255, 255, 255, .01)",
              evenRowBGC: "rgba(255, 255, 255, .05)",
            };
          }
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });

      //更新数据峰值
      getDataTop(this.DeviceValue).then((response) => {
        if (response.flag) {
          if (response.data) {
            this.Top = response.data;
          } else {
            this.Top = {};
          }
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });

      //更新数据曲线
      getLineList(this.DeviceValue).then((response) => {
        if (response.flag) {
          this.LineData = response.data;
          this.drawItemsLine();
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });

      //更新满足率
      getDataStyle(this.DeviceValue).then((response) => {
        if (response.flag) {
          this.DataConfig = {
            data: response.data.items,
            colors: [
              "#37a2da",
              "#32c5e9",
              "#37a2da",
              "#32c5e9",
              "#37a2da",
              "#32c5e9",
              "#37a2da",
              "#32c5e9",
            ],
          };
          this.WholeStyle = response.data.whole;
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });

      //获取异常记录
      getWarnData(this.DeviceValue).then((response) => {
        if (response.flag) {
          this.WarningData = {
            data: response.data,
            index: true,
            columnWidth: [50],
            rowNum: 4,
            align: ["center"],
            oddRowBGC: "rgba(255, 255, 255, .01)",
            evenRowBGC: "rgba(255, 255, 255, .05)",
          };
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });

      //获取总房间设备信息
      getRoomData().then((response) => {
        if (response.flag) {
          this.OverMess.room = response.data.room;
          this.OverMess.over = response.data.over;
          this.OverMess.device = response.data.device;
          this.OverRate = {
            data: response.data.overRate,
            shape: "roundRect",
            waveHeight: 16,
          };
        } else {
          this.$message({
            message: response.message,
            type: "error",
            center: true,
          });
        }
      });
    },
    JumpToLogin() {
      this.$router.push("/login");
    },
  },
  created() {
    this.getMess();

    //调整界面
    window.addEventListener('load', () => {
        let overrater = document.getElementById('overrater');
        let mainMess = document.getElementById('top-main-mess');
        let SimpleMess = document.getElementById('top-left');
        let body = document.getElementById('body');

        let screenW = window.screen.availHeight + 'px';
        body.style.height = screenW;

        let mHeight = mainMess.clientHeight;
        overrater.style.height = parseInt(mHeight / 3) > 110 ? parseInt(mHeight / 3) + 'px': '110px';

        let sWidth = SimpleMess.clientWidth - 36;
        let itemWidth = parseInt((sWidth - 60) / 3);
        this.SimpleSize = [60, itemWidth, itemWidth];
    })
  },
  mounted() {
    var timer = setInterval(() => {
      this.$nextTick(function () {
        this.UpdateData();
      });
    }, 20000);
    var timerfortime = setInterval(this.refreshDateTime, 1000);
    //定时器清除
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
      clearInterval(timerfortime);
    });
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/myCss/dashboard.scss";
</style>
